<template>
  <div class="page">
    <navigation>{{ $t('个人中心') }}</navigation>
    <div class="info-form">
      <label class="info-item">
        <div class="label">{{ $t('头像') }}</div>
        <div class="value">
          <input type="file" accept="image/*" capture="camera" class="file-input" @change="handleHead">
          <img :src="auth.user.head_portrait" alt="" class="head">
        </div>
        <i class="iconfont icon-jiantouarrow487"></i>
      </label>
      <nuxt-link to="profile/set-nickname" class="info-item">
        <div class="label">{{ $t('昵称') }}</div>
        <div class="value">{{ auth.user.nickname }}</div>
        <i class="iconfont icon-jiantouarrow487"></i>
      </nuxt-link>
      <div class="info-item">
        <div class="label">{{ $t('手机号') }}</div>
        <div class="value">{{ auth.user.mobile_phone }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  computed: {
    ...mapState({
      auth: ({ auth }) => auth
    })
  },
  beforeMount () {
    this.getUserInfo()
  },
  methods: {
    ...mapActions({
      editUserInfo: 'auth/editUserInfo',
      getUserInfo: 'auth/getUserInfo'
    }),
    handleHead (event) {
      const payload = {
        nickname: this.auth.user.nickname,
        head_portrait: event.target.files[0]
      }
      const formData = new FormData()
      Object.keys(payload).forEach((field) => {
        formData.append(field, payload[field])
      })
      this.editUserInfo(formData)
        .then((data) => {
          this.getUserInfo()
        })
    }
  }
}
</script>
<style scoped>
.page {
  padding-top: 90px;
}
.info-form {
  border-top: 1px solid #fbfbfb;
}
.info-item {
  position: relative;
  padding: 0 15px;
  height: 50px;
  border-bottom: 1px solid #fbfbfb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-item .label {
  flex-shrink: 0;
  font-size: 13px;
}
.info-item .value {
  flex-grow: 1;
  text-align: right;
  padding: 0 5px;
}
.info-item .head {
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
</style>
